<template>
    <div>
        <refresh v-if="breadcrumbList.length" :loading="isRefreshing" title="同步Hive" @refresh="onRefresh" />
        <el-radio-group v-model="resourceLabel">
            <el-radio-button label="公共"></el-radio-button>
            <el-radio-button v-if="isTenant" label="私有"></el-radio-button>
            <el-radio-button v-if="isTenant" label="共享"></el-radio-button>
        </el-radio-group>
        <search placeholder="请输入资源名称" :live-search="true" :search-word.sync="searchWord" @search="onSearch"/>
        <!-- 目录面包屑 -->
        <el-breadcrumb v-if="breadcrumbList.length" separator=">" class="breadcrumb-wrap">
            <el-breadcrumb-item @click.native="onReturn">
                <span class="cursor">返回 </span>
            </el-breadcrumb-item>
            <el-breadcrumb-item
                v-for="(bread, index) in breadcrumbList"
                :key="bread.resourceId"
                @click.native="onBreadChange(bread, index)"
            >
                <span class="cursor">{{bread.name}}</span>
            </el-breadcrumb-item>
        </el-breadcrumb>
        <div v-else class="bread-holder"></div>
        <!-- 资源列表 -->
        <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            v-loading="loading"
        >
            <el-table-column
                :label="currFirstColumnName"
            >
                <template slot-scope="scope">
                    <el-link
                        v-if="currFirstColumnName !== '列'"
                        :underline="false"
                        type="primary"
                        @click.native="onOpenService(scope.row)"
                    >{{ scope.row[currNameKey] }}</el-link>
                    <span v-else>{{ scope.row[currNameKey] }}</span>
                </template>
            </el-table-column>
            <el-table-column
                :label="`分配的${subUserFlag}`"
            >
                <template slot-scope="scope">
                    <template v-if="scope.row[subListFlag] && scope.row[subListFlag].length">
                        <span 
                            class="tenant-name" 
                            v-for="(tenant, i) in scope.row[subListFlag]" 
                            :key="tenant"
                        >
                            {{ tenant }}
                            {{ formatDian(scope.row[subListFlag].length, i) }}
                        </span>
                    </template>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column
                v-if="resourceType === 2"
                label="分享的租户"
            >
                <template slot-scope="scope">
                    <template v-if="scope.row.tenantList && scope.row.tenantList.length">
                        <span 
                            class="tenant-name" 
                            v-for="(tenant, i) in scope.row.tenantList" 
                            :key="tenant"
                        >
                            {{ tenant }}
                            {{ formatDian(scope.row.tenantList.length, i) }}
                        </span>
                    </template>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column 
                label="当前租户包含权限" 
                v-if="isTenant"
            >
                <template slot-scope="scope">
                    <span 
                        v-for="(m, i) in (scope.row.powerList || '-').split('|')" 
                        :key="m"
                    >
                        {{ m }}
                        {{ formatDian((scope.row.powerList || '-').split('|').length, i) }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
            >
                <template slot-scope="scope">
                    <el-tooltip v-if="canAssignAuth" content="权限配置" placement="top">
                        <el-button @click="handleAssignAuth(scope.row)" type="text" size="small">
                            <i class="el-icon-unlock icon-fs"></i>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip v-if="canSHowDetail" content="查看详情" placement="top">
                        <el-button @click="handleViewDetail(scope.row)" type="text" size="small">
                            <i class="el-icon-view icon-fs"></i>
                        </el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination 
            :total="total"
            :current-page="currentPage"
            :page-size="pageSize"
            @currentPageChange="handleCurrentPageChange"
            @pageSizeChange="handlePageSizeChange"
        />
        <!-- 权限配置弹窗 -->
        <authority-dialog
            v-if="dialogVisible"
            :visible.sync='dialogVisible'
            :current-row="currentRow"
            :service-path="getServiceName(currentRow)"
            @update="handleUpdateAuth"
        />
        <!-- 权限详情弹窗 -->
        <authority-detail 
            v-if="detailVisible"
            :visible.sync='detailVisible'
            :current-row="currentRow"
            :service-path="getServiceName(currentRow)"
        />
    </div>
</template>
<script>
import roleMixin from '@/mixins/role'
import serviceAuthMixin from './mixins/serviceAuthMixin.js'
import AuthorityDialog from '@/components/authority/Dialog.vue'
import AuthorityDetail from '@/components/authority/Detail.vue'
import Breadcrumb from '@/components/authority/Breadcrumb.vue'
import Search from '@/components/common/Search.vue'
import Pagination from '@/components/common/Pagination.vue'

const RESOURCE_TYPE_MAP = {
    '公共': 1,
    '私有': 2,
    '共享': 3
}

const SERVICE_MAP = [
    {
        cate: 1,
        name: '库名',
        nameKey: 'databaseName',
        childType: 'table'
    },
    {
        cate: 2,
        name: '表名',
        nameKey: 'tableName',
        childType: 'family'
    },
    {
        cate: 3,
        name: '列名',
        nameKey: 'columnName',
        childType: ''
    }
]

export default {
    name: 'authorityHBase',
    components: { AuthorityDialog, AuthorityDetail, Search, Breadcrumb, Pagination },
    mixins: [ roleMixin, serviceAuthMixin ],
    computed: {
        // 当前列表资源目录
        currDir() {
            if (this.breadcrumbList.length === 0) {
                return { id: 0, nameKey: 'spaceName', childType: 'namespace' }
            }
            return this.breadcrumbList[this.breadcrumbList.length - 1]
        },
        // 当前第一列的列名
        currFirstColumnName() {
            const len = this.breadcrumbList.length
            if (this.resourceType === 2) {
                return SERVICE_MAP[len].name
            } else {
                return SERVICE_MAP[len].name
            }
        },
        // 当前资源名的key
        currNameKey() {
            return SERVICE_MAP[this.breadcrumbList.length].nameKey
        },
        canAssignAuth() {
            if (this.resourceType === 1 && !this.breadcrumbList.length) {
                return false
            } //共享
            if (this.resourceType === 3 && !this.breadcrumbList.length) {
                return false
            }
            return true
        },
        canSHowDetail()　{
            // 共享资源权限
            if (this.resourceType === 3 && !this.breadcrumbList.length) {
                return false
            }
            return true
        },
    },
    watch: {
        resourceType(newVal) {
            this.breadcrumbList = [ ]
            this.getResourceList({ currentPage: 1 })
        }
    },
    methods: {
        // 点击打开资源
        onOpenService(serviceInfo) {
            if (this.breadcrumbList.length + 1 >= SERVICE_MAP.length) {
                return false
            }
            const level = serviceInfo.level || serviceInfo.cate
            const nameKey = (SERVICE_MAP[level - 1] || {}).nameKey || ''
            this.breadcrumbList.push({ ...serviceInfo, name: serviceInfo[nameKey] })
            this.getResourceList({ resourceId: serviceInfo.resourceId, currentPage: 1 })
        },
        // 获取资源名称
        getServiceName(serviceInfo = {}) {
            const level = serviceInfo.level || serviceInfo.cate
            const k = SERVICE_MAP[level - 1]['nameKey']
            return serviceInfo[k]
        }
    }
}
</script>
<style lang="scss" scoped>
    @import '~@/styles/variables.scss';
    .breadcrumb-wrap {
        margin: 20px 0;

        .el-breadcrumb__item {
            font-size: 18px; 
        }

        .root {
            cursor: not-allowed;
        }

        .cursor {
            color: $blue;
            cursor: pointer;
            font-size: 18px;
        }
    }
    .bread-holder {
        width: 20px;
        height: 58px;
    }
    .tenant-name {
        color: $dark;
    }
    .el-checkbox {
        min-width: 80px;
    }
</style>
